<template>
  <div class="user-manager content">
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="角色管理" name="1">
          <div style="margin-top: 20px;">
            <el-button type="primary">新增</el-button>
            <el-button type="danger">删除</el-button>
            <el-button type="success">权限分配</el-button>
          </div>
          <div class="table" style="background: #ffffff;">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#3C8DBC',color: '#fff'}">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="id" label="角色名"></el-table-column>
              <el-table-column prop="name" label="是否启用"></el-table-column>
              <el-table-column prop="email" label="描述"></el-table-column>
              <el-table-column label="操作" width="340" header-align="center" align="center">
                <template v-slot="scoped">
                  <el-button type="primary" size="mini" plain>编辑</el-button>
                  <el-button type="danger" size="mini" plain>删除</el-button>
                  <el-button type="primary" size="mini" plain>权限分配</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 20px; height: 50px;text-align: right;">
              <el-pagination background layout="prev, pager, next" :total="4"></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="third">
          <div style="width: 1200px; margin: 0 auto;">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px" label-position="left">
              <el-form-item prop="old" label="原密码">
                <el-input placeholder="请输入原密码"></el-input>
              </el-form-item>
              <el-form-item prop="new" label="新密码">
                <el-input placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item prop="check" label="确认密码">
                <el-input placeholder="请输入确认密码"></el-input>
              </el-form-item>
              <el-form-item>
                <div style="margin: 40px 0; text-align: center;">
                  <el-button type="primary" @click="submitForm('form')">确认</el-button>
                  <el-button style="margin-left: 30px;" type="primary">取消</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        old: '',
        new: '',
        check: ''
      },
      activeName: '1',
      tableData: [
        {id: '超级管理员',name: '已启用',email: '管理所有系统权限'},
        {id: '管理员',name: '已启用',email: '管理系统权限'},
        {id: '普通角色',name: '已启用',email: '浏览部分商品'},
        {id: '会员',name: '已启用',email: '浏览已上架的所有商品，可询价'},
      ],
      value1: '',
      rules: {
        old: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        new: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        check: [
          { required: true, message: '请输入确认密码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {

    },
    handleClick() {

    }
  }
}
</script>
<style lang="less" scoped>
.user-manager{
  text-align: left;
  margin: 20px;
  .header{
    padding: 20px;
    background: #ffffff;
  }
  .mids{
    img{
      width: 50px;
      height: 50px;
    }
  }
  .table{
    margin-top: 20px;
  }
}
</style>